<template>
	<div ref="container"   class="container">
		<div>
			<!--热门城市-->
			<div class="hostcity">
				<h2>热门城市</h2>
				<ul>
					<li v-for="item in hotCities" :key="item.id"  @click="changeCityName(item.name)"    >{{item.name}}</li>
				</ul>
			</div>
			
			<!--字母排序-->
			<div class="letter">
				<h2>字母排序</h2>
				<ul>
					<li v-for="(item,key) in cities" :key="key" @click="changeSoter(key)"  >{{key}}</li>
				</ul>
			</div>
			
			
			<!--城市列表-->
			<div class="acities" v-for="(item,key) in cities" :key="item.id"  :ref="key"  >
				<h2>{{key}}</h2>
				<ul>
					<li v-for="tab in item" :key="tab.id"  @click="changeCityName(tab.name)"  >{{tab.name}}</li>
				</ul>
			</div>
		</div>
	</div>
	
</template>

<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'

export default{
	props:["hotCities","cities"],
	data(){
		return {
			scroll:""
		}
	},
	mounted (){
		let container=this.$refs.container
		this.scroll = new BScroll(container,{click:true})
	},
	methods:{
		changeSoter(storeName){
//			alert(storeName)
//          console.log(this.$refs[storeName][0]);
            this.scroll.scrollToElement(this.$refs[storeName][0])
             
		},
		changeCityName(CityName){
//			alert(CityName)
             this.changCity(CityName);
			 this.$router.push("./")

	   },
	   ...mapMutations(["changCity"])

	}
	
}

</script>

<style>
	.container{
		position: absolute;
		overflow: hidden;
		left: 0;
		right: 0;
		bottom: 0;
		top: .74rem;
		
	}
	
	
	
	/*热门城市样式*/
	.hostcity h2{
		height: 0.4rem;
		line-height: 0.4rem;
		display: block;
        font-size: 0.12em;
        background: #EEEEEE;
        padding-left: 0.1rem;
	}
	.hostcity ul{
		width: 100%;
		background: #FFFFFF;
		clear: both;
		overflow: hidden;
		/*height: 1.8rem;*/
	}
	.hostcity ul li{
		width: 33.2%;
		height: 0.45rem;
		font-size: 0.14rem;
		float: left;
		border-right: 0.005rem solid #EEEEEE;
		border-bottom: 0.005rem solid #EEEEEE;
		text-align: center;
		line-height: 0.45rem;
	}
	
	/*字母排序样式*/
	.letter{
		clear: both;
	}
	.letter h2{
		height: 0.4rem;
		line-height: 0.4rem;
		display: block;
        font-size: 0.12em;
        background: #EEEEEE;
        padding-left: 0.1rem;
	}
	.letter ul{
		width: 100%;
		background: #FFFFFF;
		clear: both;
		overflow: hidden;
		
		
	}
	.letter ul li{
		width: 16%;
		height: 0.45rem;
	    margin-left: .1rem;
		font-size: 0.14rem;
		float: left;
		text-align: center;
		line-height: 0.45rem;
		
	}
	
	
	
	
	
	
	
	/*城市类表样式*/
	.acities {
		clear: both;
	}
	.acities h2{
		height: 0.4rem;
		line-height: 0.4rem;
		display: block;
        font-size: 0.12em;
        background: #EEEEEE;
        padding-left: 0.1rem;
        
	}
	.acities ul{
		width: 100%;
		background: #FFFFFF;
		clear: both;
		overflow: hidden;
		
	}
	.acities ul li{
		box-sizing: border-box;
		width: 25%;
		height: 0.45rem;
		font-size: 0.14rem;
		float: left;
		border-right: 0.005rem solid #EEEEEE;
		border-bottom: 0.005rem solid #EEEEEE;
		text-align: center;
		line-height: 0.45rem;
	}
</style>